{% extends 'baykeshop/base_site.html' %}

{% load static shop_tags %}

{% block title %}结算中心{% endblock %}

{% block extrastyle %}
<script src="{% static 'baykeshop/js/axios.min.js' %}"></script>
<script src="{% static 'baykeshop/js/request.js' %}"></script>
{% endblock %}

{% block breadcrumb %}
<div class="container">
  <nav class="breadcrumb is-marginless mt-3 mb-3 is-small" aria-label="breadcrumbs">
    <ul>
      <li><a href="{% url 'baykeshop:home' %}">首页</a></li>
      <li><a href="{% url 'baykeshop:carts' %}">购物车</a></li>
      <li class="is-active"><a href="#" aria-current="page">订单确认</a></li>
    </ul>
  </nav>
</div>
{% endblock %}

{% block content %}
    <div class="container">
        {% address_result request.user %}
      
        <div class="box is-marginless is-radiusless" id="saveOrder">
            <h1 class="is-size-5">订单商品</h1>
            <div class=" dropdown-divider"></div>
            {% for cart in carts %}
            <div class="columns">
                <div class="column is-2 is-flex is-justify-content-center">
                    <figure class="image is-128x128">
                        {% if cart.spu %}
                        <img src="{{ cart.cover_pic.url }}" alt="{{ cart.spu.title }}">
                        {% else %}
                        <img src="{{ cart.sku.cover_pic.url }}" alt="{{ cart.sku.spu.title }}">
                        {% endif %}
                    </figure>
                </div>
                <div class="column is-flex is-flex-direction-column is-justify-content-center">
                    {% if cart.spu %}
                    <h1 class=" has-text-weight-bold">{{ cart.spu.title }}</h1> 
                        {% if cart.options.all %}
                            <span class="has-text-grey-light"> 规格：{{ cart.options.all|join:' ' }}</span>
                        {% endif %}
                    {% else %}
                        <h1 class=" has-text-weight-bold">{{ cart.sku.spu.title }}</h1> 
                        
                        {% if cart.sku.options.all %}
                        <span class="has-text-grey-light"> 规格：{{ cart.sku.options.all|join:' ' }}</span>
                        {% endif %}
                    {% endif %}
                </div>
                <div class="column is-2 is-flex is-justify-content-center is-align-items-center">
                    {% if cart.spu %}¥{{ cart.price  }} x {{ cart.num }}{% else %}¥{{ cart.sku.price}} x {{ cart.num }}{% endif %}
                </div>
                <div class="column is-2 is-flex is-justify-content-center is-align-items-center">
                    ¥{{ cart.total_price }}
                </div>

            </div>
            <div class="dropdown-divider"></div>
            {% empty %}
            未选择任何商品！
            {% endfor %}

            {% if carts %}
            <!-- 订单留言 -->
            <div class="box is-shadowless is-radiusless has-background-light">
                <div class="field">
                    <label class="label">订单留言</label>
                    <div class="control">
                        <textarea class="textarea" v-model="mark" placeholder="请备注说明您的特殊要求..."></textarea>
                    </div>
                </div>
            </div>

            <!-- 付款信息 -->
            <div class="is-flex is-flex-direction-column">
                <div class="is-flex mb-2">
                    <div class=" has-text-right" style="width:85%">{{ count }} 件商品，总商品金额：</div>
                    <div class=" has-text-left" style="width:10%; margin-left:5%;">¥{{ total }} </div>
                </div>
                <div class="is-flex mb-2">
                    <div class="has-text-right" style="width:85%">运费：</div>
                    <div class="has-text-left" style="width:10%;margin-left:5%;">¥{{ freight }} </div>
                </div>
                <div class="is-flex has-text-danger-dark">
                    <div class=" has-text-right is-size-5" style="width:85%">应付总额：</div>
                    <div class=" has-text-left is-size-5" style="width:10%; margin-left:5%;">¥{{ pay_total }} </div>
                </div>
            </div>
            <div class=" dropdown-divider"></div>
            <div class="has-text-right">
                <button class="button is-primary mt-2 pl-6 pr-6 mr-6 is-large" @click="paySave">提交订单</button>
            </div>
            {% endif %}
        </div>
        
        
    </div>

{% endblock %}


{% block vue %}
    <script>
        var saveOrder = new Vue({
            el: '#saveOrder',
            delimiters: ['{$', '$}'],
            data:{
                mark: ""
            },
            methods:{
                paySave(){
                    if (!address._data.formProps.id){
                        navbar.toastMessage('is-danger', '请选择有效收货地址！')
                        return
                    }

                    // 提交订单
                    const sendData = new FormData()
                    sendData.append('addr_id', address._data.formProps.id)
                    sendData.append('order_mark', this.mark)
                    request({
                        method: 'post',
                        url: `{% url "baykeshop:cash_register" %}`,
                        headers: {'Accept': 'application/json'},
                        data: sendData
                    }).then(res => {
                        if (res.data.code == 'ok') {
                            navbar.toastMessage('is-success', res.data.message)
                            location.href = res.data.pay_url
                        }else{
                            navbar.toastMessage('is-danger', res.data.message)
                        }
                    })
                }
            }
        })
    </script>
{% endblock %}
    
    